<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>musicPlay</title>
	<link rel="stylesheet" type="text/css" href="css/music.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
</head>
<body>
	<div class="banner">
		<ul>
			<li class="m1" datasrc="mp3/1.mp3" title="苦瓜-陈奕迅">
				<img src="img/1.jpg" width="70"/>
			</li>
			<li class="m2" datasrc="mp3/2.mp3" title="时光机-周杰伦">
				<img src="img/2.jpg" width="90" />
			</li>
			<li class="m3" datasrc="mp3/3.mp3" title="绅士-薛之谦">
				<img src="img/3.jpg" width="80"/>
			</li>
			<li class="m4" datasrc="mp3/4.mp3" title="杀手-林俊杰">
				<img src="img/4.jpg" width="90"/>
			</li>
			<li class="m5" datasrc="mp3/5.mp3" title="能解答一切的答案-周深">
				<img src="img/5.jpg" width="70"/>
			</li>
		</ul>
	</div>

	<div class="music">
		<div class="m_img">
			<img src="img/1.jpg" width="90">
		</div>
		<div class="m_text">苦瓜-陈奕迅</div>
		<div class="m_btn">
			<a href="#"  class="m_prev" title="上一首"></a>
			<a href="#"  class="m_play" title="播放"></a>
			<a href="#"  class="m_next" title="下一首"></a>
		</div>
		<div class="m_close"></div>
		<audio src="mp3/1.mp3" class="m_mp3"></audio>
	</div>

	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/music.js"></script>
</body>
</html>